<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				margin: 5px;
			}

			.d1 {
				background-color: red;
			}

			.d2 {
				background-color: yellow;
			}

			.d3 {
				background-color: blue;
			}

			.d4 {
				background-color: green;
			}

			.d5 {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<!-- <a href="https://www.atstudy.com">学掌门</a> -->
		<div class="d1"></div>
		<div class="d2">22</div>
		<div class="d3">33</div>
		<div class="d4">44</div>
		<button class="add">增</button>
		<button class="del">删</button>
		<button class="replace">替换</button>
		<script type="text/javascript">
			//-----------------改-------------------------------
			//获取button节点对象
			var replace = document.querySelector('.replace');
			//注册click事件
			replace.addEventListener('click', function() {
				//oReplace = object.replaceChild(oNewNode, oChildNode)
				//获取类名为d4的div节点对象
				var oNewNode = document.querySelector('.d4');
				/*
				   克隆d4节点对象，返回克隆的对象
				   false Default. Cloned objects do not include childNodes. 
				   true Cloned objects include childNodes. 
				*/
				var cn = oNewNode.cloneNode(true);
				//获取类名为d2的div节点对象
				var oChildNode = document.querySelector('.d2');
				//获取body节点对象
				var body = document.body;
				//替换(用d4克隆的节点对象，替换d2节点对象)
				body.replaceChild(cn, oChildNode); 
			})
			//-----------------删-------------------------------
			var del = document.querySelector('.del');
			del.addEventListener('click', function() {
				var d2 = document.querySelector('.d2');
				//父
				var body = document.body;
				//从父中删除子
				body.removeChild(d2);

			})
			//-----------------增-------------------------------
			var add = document.querySelector('.add');
			add.addEventListener('click', function() {
				//创建div节点对象
				var div = document.createElement('div');
				//设置div节点对象的值
				div.innerText = "55";
				// div.style.backgroundColor = 'orange';
				div.className = 'd5'

				var body = document.querySelector('body');
				//往body中追加div节点对象
				// body.appendChild(div);				

				//------------------------------------------------

				//创建a标签节点对象
				var a = document.createElement('a');
				a.href = 'https://www.atstudy.com';
				a.innerText = "学掌门";

				var d1 = document.querySelector('.d1');
				d1.appendChild(a);
			})
		</script>
	</body>
</html>
